import React, { Component } from 'react';
//import { Form, TextInput, Label } from 'react-easy-form';

import Translate from 'react-translate-component';
import Grid from 'react-bootstrap/lib/Grid';

import { Form } from 'formsy-react';
import Input from 'formsy-react-components/release/input'
import File from 'formsy-react-components/release/input-file'

const ErrorPanel = ({messageKey}) => (
  <p className="error-panel">
    <Translate content={messageKey} />
  </p>
);

export default class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      canSubmit: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.disableButton = this.disableButton.bind(this);
  }

  enableButton() {
    this.setState({ canSubmit: true });
  }

  disableButton() {
    this.setState({ canSubmit: false });
  }

  render() {
    const {errorMessage} = this.props;
    const errorPanel = errorMessage ? <ErrorPanel messageKey={errorMessage}/> : null;
    return (
      <div>
        <Translate component="h2" content="login.title" />

        <Translate component="p" content="login.hint" />

        {errorPanel}
        <Form onSubmit={this.handleSubmit} onValid={this.enableButton} onInvalid={this.disableButton} className="login">
          <Input name="username" label="Login" required validationError="Login name is required"/>
          <Input name="password" type="password" label="Password" required validationError="Password is required"/>

          <button type="submit" disabled={!this.state.canSubmit}>Login</button>
        </Form>

      </div>
    );
  }

  handleSubmit(formData) {
    const { username, password } = formData;
    const { login } = this.props;
    login(username, password);
  }
}
